<template>
  <div>
    <div id="SelectProvinceNav" class="main">
      <div class="title-box fexlDf f14">
        <div class="left curpoin">
          <div class="df">
            <div class="province-box" @click="handleSelectProv">
              <span>{{
                store.getters.znxkInfo.currentCityeInfo.provinceName ||
                store.getters.user.userInfo.province
              }}</span>
              <el-icon style="margin: 0 5px; z-index: 99"
                ><MapLocation
              /></el-icon>
            </div>
            <div class="text-color">
              {{
                store.getters.znxkInfo.currentCityeInfo.year ||
                store.getters.user.defaultYear
              }}年选科
            </div>
          </div>
        </div>
        <div class="right curpoin" @click="handleGoToSubject">
          我的选科方案（{{ mySubject.length }}）
        </div>
      </div>
    </div>
    <SelectProvince ref="selectProvinceRef" :provinceList="provinceList" />
  </div>
</template>

<script setup>
import { useStore } from 'vuex';
import { ref } from 'vue';
import SelectProvince from '../SelectProvince';
import { getSelectProvince } from '@/api/provinces/province';
import { getSelectResInfo } from '@/api/selectSubject/subject';
import { useRouter } from 'vue-router';
const route = useRouter();
const store = useStore();
const { routeId } = defineProps({
  routeId: { type: [String, Number], default: '' },
});

const selectProvinceRef = ref('');
const mySubject = ref([]);
const provinceList = ref([]);
const eduLevel = ref({
  eduLevel: 'ben',
});
const defaultYear = ref('');
const handleSelectProv = () => {
  if (routeId) return;
  let senData = {};
  if (Object.keys(store.getters.user.newSelectSubjectData).length !== 0) {
    senData = store.getters.user.newSelectSubjectData;
  } else {
    senData = store.getters.user.userInfo;
  }
  selectProvinceRef.value.handleChangeVisible(senData);
};
const fetchSelcetProvince = () => {
  getSelectProvince(eduLevel.value).then((res) => {
    if (res.data.code == 20000) {
      provinceList.value = res.data.data;
      const pCode =
        store.getters.znxkInfo.currentCityeInfo.provinceCode ||
        store.getters.user.userInfo.pid;
      let firstYear = provinceList.value.find(
        (item) => item.provinceCode == pCode,
      );

      // 对应省份的下拉数据
      store.dispatch('znxk/changeSubjectOptions', firstYear.years[0].subjects);
      // 设置当前的省份数据
      store.commit('znxk/set_currentCityeInfo', {
        provinceCode: firstYear.provinceCode,
        year: firstYear.years[0].year,
        xk_type: firstYear.years[0].mode == '3_1_2' ? 3 : 2,
        provinceName: firstYear.provinceName,
      });
      if (firstYear) {
        defaultYear.value = firstYear.years[0].year;
        store.dispatch(
          'user/changeChangeProvinceYear',
          firstYear.years[0].year,
        );
      }
    }
  });
};
fetchSelcetProvince();
// 我的选科方案
const fetchSelectResInfo = () => {
  getSelectResInfo().then((res) => {
    if (res.data.code == 20000) {
      mySubject.value = res.data.data;
    }
  });
};
const handleGoToSubject = () => {
  route.push('/mysubject');
};
fetchSelectResInfo();
</script>

<style lang="scss" scoped>
#SelectProvinceNav {
  background: #fff;
  z-index: 999;
}
.title-box {
  display: flex;
  justify-content: space-between;
  // margin: 10px 0px auto;
  margin: 10px 0;
  .province-box {
    color: var(--color-text);
  }
  .right {
    color: var(--color-text);
  }
}
</style>
